import { useEffect, useState, useRef } from 'react';
import { Row, Col } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const classCourseTableInfo = {
  data: {
    result: [
      {
        week: 1,
        morningAfternoon: 0,
        section: 1,
        kcName: '英语',
        lsName: '赵小丽',
      },
      {
        week: 1,
        morningAfternoon: 0,
        section: 2,
        kcName: '英语',
        lsName: '赵小丽',
      },
      {
        week: 1,
        morningAfternoon: 0,
        section: 3,
        kcName: '英语',
        lsName: '赵小丽',
      },
      {
        week: 1,
        morningAfternoon: 0,
        section: 4,
        kcName: '英语',
        lsName: '赵小丽',
      },
      {
        week: 2,
        morningAfternoon: 0,
        section: 1,
        kcName: '道德与法治',
        lsName: '刘红霞',
      },
      {
        week: 2,
        morningAfternoon: 0,
        section: 2,
        kcName: '道德与法治',
        lsName: '刘红霞',
        isCurrent: true,
      },
      {
        week: 2,
        morningAfternoon: 1,
        section: 3,
        kcName: '道德与法治',
        lsName: '刘红霞',
      },
      {
        week: 2,
        morningAfternoon: 1,
        section: 4,
        kcName: '道德与法治',
        lsName: '刘红霞',
      },
    ],
  },
};

const maxSectionCount = {
  data: {
    result: {
      morningCount: 4,
      morningSections: ['07:00-07:45', '08:00-08:45', '09:00-09:45', '10:00-10:45'],
      afternoonCount: 4,
      afternoonSections: ['13:00-13:45', '14:00-14:45', '15:00-15:45', '16:00-16:45'],
      memo: '我刚来恁妮醒了风景到你防控到了到了到了哦可我刚来恁妮醒了风景到你防控到了到了到了哦可我刚来恁妮醒了风景到你防控到了到了到了哦可',
    },
  },
};
export default () => {
  const [tbody1, setTBody1] = useState();
  const [tbody2, setTBody2] = useState();

  const genCellContent = (courses = []) => {
    return courses.length ? (
      <span>
        <div className={styles.kcName}>{courses[0].kcName}</div>
        <div className={styles.lsName}>({courses[0].lsName})</div>
      </span>
    ) : (
      <span>
        <div className={styles.kcName}>&nbsp;</div>
        <div className={styles.lsName}>&nbsp;</div>
      </span>
    );
  };

  useEffect(() => {
    if (!classCourseTableInfo.data || !maxSectionCount.data) {
      return;
    }
    const { result: courseCount } = maxSectionCount.data;
    const { result: tableData } = classCourseTableInfo.data;
    let rows = [];
    if (!courseCount) {
      setTBody1(rows);
      setTBody2(rows);
      return;
    }
    // 上午
    for (let i = 1; i <= courseCount.morningCount; i += 1) {
      const cells = [];
      cells.push(
        <Col
          flex="85px"
          className={classNames('header', styles['border-cell'])}
          key={`c_m_${i}_time`}
        >
          <span>
            <div className={styles.kcName}>{`第${i}节`}</div>
            <div className={styles.lsName}>{courseCount.morningSections[i - 1]}</div>
          </span>
        </Col>,
      );
      for (let j = 1; j <= 5; j += 1) {
        const courses = tableData
          ? tableData.filter(
              (x) =>
                x.morningAfternoon === 0 && x.week === j && (x.section === i || x.section === 0),
            )
          : [];
        cells.push(
          <Col
            flex="95px"
            key={`c_m_${i}_${j}`}
            className={classNames(
              styles['border-cell'],
              courses.length && courses[0].isCurrent && styles.currentCell,
            )}
          >
            {genCellContent(courses)}
          </Col>,
        );
      }
      rows.push(
        <Row className="data-table-row" wrap={false} key={`r_m_${i}`}>
          {cells}
        </Row>,
      );
    }
    setTBody1([...rows]);

    // 下午
    rows = [];
    for (let i = 1; i <= courseCount.afternoonCount; i += 1) {
      const cells = [];
      cells.push(
        <Col
          flex="85px"
          className={classNames('header', styles['border-cell'])}
          key={`c_a_${i}_time`}
        >
          <span>
            <div className={styles.kcName}>{`第${i}节`}</div>
            <div className={styles.lsName}>{courseCount.afternoonSections[i - 1]}</div>
          </span>
        </Col>,
      );
      for (let j = 1; j <= 5; j += 1) {
        const courses = tableData
          ? tableData.filter(
              (x) =>
                x.morningAfternoon === 1 && x.week === j && (x.section === i || x.section === 0),
            )
          : [];
        courses.sort((a, b) => a.id - b.id);
        cells.push(
          <Col
            flex="95px"
            key={`c_a_${i}_${j}`}
            className={classNames(
              styles['border-cell'],
              courses.length && courses[0].isCurrent && styles.currentCell,
            )}
          >
            {genCellContent(courses)}
          </Col>,
        );
      }
      rows.push(
        <Row className="data-table-row" wrap={false} key={`r_a_${i}}`}>
          {cells}
        </Row>,
      );
    }
    setTBody2([...rows]);
  }, [classCourseTableInfo.data, maxSectionCount.data]);

  return (
    <div className={classNames(styles.wrapper)}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']}>
        <Col span={24}>
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>班级课表</span>
          </Row>
        </Col>
        <Col span={24}>
          <Row className="data-table-row" wrap={false}>
            <Col flex="70px" className={classNames('header', styles['border-cell'])}>
              午别
            </Col>
            <Col flex="85px" className={classNames('header', styles['border-cell'])}>
              时间
            </Col>
            <Col flex="95px" className={classNames('header', styles['border-cell'])}>
              星期一
            </Col>
            <Col flex="95px" className={classNames('header', styles['border-cell'])}>
              星期二
            </Col>
            <Col flex="95px" className={classNames('header', styles['border-cell'])}>
              星期三
            </Col>
            <Col flex="95px" className={classNames('header', styles['border-cell'])}>
              星期四
            </Col>
            <Col flex="95px" className={classNames('header', styles['border-cell'])}>
              星期五
            </Col>
          </Row>
        </Col>
        <Col span={24}>
          <Row className="data-table-row" wrap={false}>
            <Col
              flex="70px"
              className={classNames('header', styles['border-cell'], styles['noon-cell'])}
              style={{ display: 'flex' }}
            >
              上午
            </Col>
            <Col flex="auto" style={{ margin: '0 0 0 4px', border: 'none' }}>
              {tbody1}
            </Col>
          </Row>
          <Row className="data-table-row" wrap={false}>
            <Col
              flex="70px"
              className={classNames('header', styles['border-cell'], styles['noon-cell'])}
              style={{ display: 'flex' }}
            >
              上午
            </Col>
            <Col flex="auto" style={{ margin: '0 0 0 4px', border: 'none' }}>
              {tbody1}
            </Col>
          </Row>
        </Col>
        <Col>
          {maxSectionCount.data?.result?.memo && (
            <Row wrap={false} style={{ color: '#FF8F1E', paddingTop: 20 }}>
              <Col flex="40px" />
              <Col flex="75px" className={styles.memoLabel}>
                备注：
              </Col>
              <Col flex="auto" className={styles.memo}>
                {maxSectionCount.data.result.memo}
              </Col>
            </Row>
          )}
        </Col>
      </Row>

      {/* <Row>
        <Col flex="78px" className="header" style={{ display: 'flex' }}>
          上午
        </Col>
        <Col flex="auto" style={{ border: 'unset', margin: '0 0 0 2px' }}>
          {tbody1}
        </Col>
      </Row>
      <Row>
        <Col flex="78px" className="header" style={{ display: 'flex' }}>
          下午
        </Col>
        <Col flex="auto" style={{ border: 'unset', margin: '0 0 0 2px' }}>
          {tbody2}
        </Col>
      </Row> */}
    </div>
  );
};
